import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { withNavigation } from 'react-navigation'
import { observer } from 'mobx-react/native'
import { capitalize } from 'lodash'
import { Avatar } from './avatar'
import { Icon } from './icon'

export const ProfileCard = observer(
  withNavigation(({ profile: { id, name, role }, navigation }) => (
    <View style={styles.container}>
      <View style={styles.content}>
        <View style={styles.avatar}>
          <Avatar size={60} />
        </View>
        <View style={styles.literal}>
          <Text style={styles.name}>{name}</Text>
          <Text style={styles.role}>{capitalize(role)}</Text>
        </View>
      </View>
      <TouchableOpacity
        style={styles.extra}
        onPress={() => navigation.navigate('Profile', { id })}
      >
        <Icon name="arrow-forward" />
      </TouchableOpacity>
    </View>
  )),
)

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    borderBottomWidth: 1,
    borderBottomColor: 'whitesmoke',
    backgroundColor: 'white',
  },
  content: {
    flexDirection: 'row',
  },
  avatar: {
    margin: 15,
  },
  literal: {
    justifyContent: 'center',
  },
  name: {
    fontSize: 15,
    marginBottom: 5,
  },
  role: {
    fontSize: 12,
    color: 'slategray',
  },
  extra: {
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: 15,
  },
})
